<template>
  <div>
    <div class="container">
      <div class="header">
        <div>
          <el-button type="text" icon="el-icon-arrow-left" style="color: black" @click="goBack">
            <span>购买加速包</span>
          </el-button>
        </div>
        <div class="right">
          <el-button type="text" icon="el-icon-more"></el-button>
          <el-button type="text" icon="el-icon-s-help"></el-button>
        </div>
      </div>
      <h1>{{this.quickenPoint}}</h1>
      <h5>当前加速值</h5>

      <h5 class="titleBuy">购买越多优惠越多</h5>
      <div class="package-list">
        <!-- 第一个套餐 -->
        <div class="package-item">
          <el-radio-group v-model="selectedIndex">
            <el-radio :label="0">
              <div class="package-title">{{package1.value}}加速值</div>
              <div class="package-desc">可拨打30个电话</div>
              <div class="package-price">{{package1.price}}元</div>
            </el-radio>
          </el-radio-group>
        </div>
        <!-- 第二个套餐 -->
        <div class="package-item">
          <el-radio-group v-model="selectedIndex">
            <el-radio :label="1">
              <div class="package-title">{{package2.value}}加速值</div>
              <div class="package-desc">可拨打30个电话</div>
              <div class="package-price">{{package2.price}}元</div>
            </el-radio>
          </el-radio-group>
        </div>
        <!-- 第三个套餐 -->
        <div class="package-item">
          <el-radio-group v-model="selectedIndex">
            <el-radio :label="2">
              <div class="package-title">{{package3.value}}加速值</div>
              <div class="package-desc">可拨打30个电话</div>
              <div class="package-price">{{package3.price}}元</div>
            </el-radio>
          </el-radio-group>
        </div>
        <!-- 第四个套餐 -->
        <div class="package-item">
          <el-radio-group v-model="selectedIndex">
            <el-radio :label="3">
              <div class="package-title">{{package4.value}}加速值</div>
              <div class="package-desc">可拨打30个电话</div>
              <div class="package-price">{{package4.price}}元</div>
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <el-button type="primary" class="confirm-button" @click="confirmPayment">支付</el-button>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {

      tableData: [],
      isNavigating: false, // 用于标识是否正在导航
      dialogFormVisible: false,
      form: {},
      formLabelWidth: '120px',
      package1: {
        value: 300,
        price: 29.99
      },
      package2: {
        value: 800,
        price: 39.99
      },
      package3: {
        value: 1500,
        price: 59.99
      },
      package4: {
        value: 3000,
        price: 99.99
      },
      selectedIndex: 0,
      quickenPoint: '',
      user: {}
    }
  },
  methods: {
    getUserInfo(){
      this.axios.get('http://localhost:9701/web/userInfo/getUserInfo').then(res => {
        if (res.data.code === 200) {
          this.user = res.data.data;
        }
      })
    },
    findUser() {
      this.axios.get('http://localhost:9701/web/user-account/getUserAccount').then(res=>{
        this.quickenPoint = res.data.data;
      })
    },
    confirmPayment(){
      let query = {};
      if (this.selectedIndex == 0){
        query.uid = this.user.id;
        query.quickenPoint = this.package1.value;
        query.payMoney = this.package1.price
      }else if (this.selectedIndex == 1){
        query.uid = this.user.id;
        query.quickenPoint = this.package2.value;
        query.payMoney = this.package2.price
      }else if (this.selectedIndex == 2) {
        query.uid = this.user.id;
        query.quickenPoint = this.package3.value;
        query.payMoney = this.package3.price
      }else {
        query.uid = this.user.id;
        query.quickenPoint = this.package4.value;
        query.payMoney = this.package4.price;
      }
      this.axios.post('http://localhost:9701/web/user-account/pay',query).then(res=> {
        if (res.data.code == 200) {
          this.$router.push({path : 'payment', query: {payCode: res.data.data}})
        }
      })
    },
    goBack(){
      this.$router.go(-1)
    },
  },
  created() {
    this.findUser();
    this.getUserInfo();
  }

}
</script>

<style>
.confirm-button{
  width: 390px;
}

.package-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 40px;
}

.package-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.package-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}
.package-price {
  font-size: 16px;
  color: #f56c6c;
}

.titleBuy{
  text-align: left;
  margin-left: 10px;
}

.package-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.package-item {
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 15px;
  cursor: pointer;
}

.confirm-payment-btn button{
  width: 370px;
}

.container {
  width: 390px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin: 0 10px;
}

.right {
  display: flex;
  border: 1px solid #F4A780;
  padding: 5px 5px;
  border-radius: 15px;
}

.right button {
  color: #F4A780;
  padding: 0 5px;
  font-size: 18px;
}

</style>